<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="shopping">
  <meta name="description" content="shopping">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>shopping</title>
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/cart.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">

</head>

<body>
  <!-- 公共头部 -->
  <div class="contentHead">
    <div class="head">
      <div class="iconfont">
        <a href="#" class="icon pd-x_user"></a>
        <a href="#" class="icon pd-x_qrcode"></a>
        <a href="#" class="icon pd-x_phone"></a>
        <a href="#" class="icon pd-x_help"></a>
      </div>
      <div class="tel">
        <span class="icon pd-x_service"></span>
        <span class="server">服务热线</span>
        <span class="phone">400-1234-5678</span>
      </div>
    </div>
  </div>
  <!-- 头部搜索 -->
  <div class="search">
    <div class="logo">
      <img src="./images/logarea.png" alt="">
    </div>
    <div class="searchinfo">
      <div class="searchbox">
        <p>全部分类</p>
        <div class="line"></div>
        <input type="text" name="" id="" placeholder="搜索商品">
        <div class="right">
          <span class="icon pd-search_line"></span>
          <span class="sousuo">搜索</span>
        </div>
      </div>
    </div>
    <div class="myshop">
      <div class="bg">
        <span class="icon pd-x_cart"></span>
      </div>
      <div class="my">
        <p class="shop">我的购物车
          <span class="icon pd-baseicons82"></span>
        </p>
        <p class="pirce">￥ 0.00</p>
      </div>
    </div>
  </div>
  <!-- nav -->
  <div class="navT">
    <div class="nav">
      <img src="./images/nav1.png" alt="">
      <div class="navAll">
        <a href="#" style="padding-left: 72px" class="active">首页</a>
        <a href="#">限时秒杀</a>
        <a href="#">商品促销</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
      </div>
    </div>
  </div>

  <!-- 内容 -->
  <div class="cartCont">
    <div class="cartTop">
      <div class="bg">
        <div class="pic">
          <img src="./images/cart_1_s.png" alt="">
        </div>
        <span class="text active">购物车</span>
      </div>
      <div class="bg bg1">
        <div class="pic">
          <img src="./images/cart_2_n.png" alt="">
        </div>
        <span class="text">确认订单</span>
      </div>
      <div class="bg bg1 bg2">
        <div class="pic">
          <img src="./images/cart_3_n.png" alt="">
        </div>
        <span class="text">付款</span>
      </div>
      <div class="bg bg1 bg3">
        <div class="pic">
          <img src="./images/cart_4_n.png" alt="">
        </div>
        <span class="text">支付成功</span>
      </div>
    </div>
    <div class="cartBottom" id="appcart">
      <div class="title">
        <span class="text1">
          <input type="checkbox" @click="allchecked" :checked="allcheck">全选</span>
        <span class="text2">产品</span>
        <span class="text3">数量</span>
        <span class="text4">单价</span>
        <span class="text5">小计</span>
        <span>清空</span>
      </div>
      <div class="line"></div>
      <div class="contBody">
        <div v-for="(shop,index) in shops">
          <div class="shop">
            <input type="checkbox" class="checkbox" :checked="shop.checked" @click="itemcheck(index)">
            <div class="pic">
              <img :src="shop.src">
            </div>
            <div class="name">{{shop.name}}</div>
            <div class="num">
              <span class="reduce" @click="reduce(index)">-</span>
              <span class="how">{{shop.how}}</span>
              <span class="add" @click="add(index)">+</span>
            </div>
            <div class="price">￥{{shop.price}}</div>
            <div class="money">￥{{shop.price*shop.how}}</div>
            <div class="clear" @click="close(index)">X</div>
          </div>
          <div class="line1"></div>
        </div>
      </div>
      <div class="allMoney">
        <a href="#" class="go">再去逛逛</a>
        <span class="all">总计：
          <strong>￥{{allmoney}}</strong>
        </span>
      </div>
      <button class="pay">去结算</button>
    </div>
  </div>
  </div>
  <!-- 正品保障 -->
  <div class="real">
    <div class="realThing">
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="footer">
    <div class="footerTop">
      <div>
        <img src="./images/LOGO.png" alt="">
      </div>
      <div class="">
        <dl>
          <dt>配送与支付</dt>
          <dd>货到付款区域</dd>
          <dd>配送支付智能查询</dd>
          <dd>支付方式说明</dd>
        </dl>
      </div>
      <div class="">
        <dl>
          <dt>服务保证</dt>
          <dd>退换货原则</dd>
          <dd>售后服务保证</dd>
          <dd>产品质量保证</dd>
        </dl>
      </div>
      <div class="">
        <dl>
          <dt>联系我们</dt>
          <dd>网站故障报告</dd>
          <dd>选机咨询</dd>
          <dd>投诉与建议</dd>
        </dl>
      </div>
      <div class="fuwu">
        <dl>
          <dt>服务热线</dt>
          <dd>400-023-4567</dd>
        </dl>
      </div>
    </div>
    <div class="line"></div>
    <div class="footerBottom">
      <p>© 2018 WWW.SHOPPING.COM</p>
    </div>
  </div>
</body>
<script src="./js/jquery.1.8.2.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#appcart',
    data: {
      allcheck:false,
      shops: [{
          checked: false,
          src: "",
          name: "联想（LENOVO） Y900 吃鸡游戏主播台式电脑 视频剪辑设计主机 I7-7700K 32G 2TB+512G SSD 钻石版 GTX1080-8G双显卡...SLI 定制",
          price: 999.00,
          how: 0
        },
        {
          checked: true,
          src: "",
          name: "联想（LENOVO） Y900 吃鸡游戏主播台式电脑 视频剪辑设计主机 I7-7700K 32G 2TB+512G SSD 钻石版 GTX1080-8G双显卡...SLI 定制",
          price: 999.00,
          how: 0
        }
      ]
    },
    methods: {
      add:function(index){
        var shops = this.$data.shops;
        shops[index].how += 1;
      },
      reduce:function(index){
        var shops = this.$data.shops;
        if(shops[index].how > 0){
          shops[index].how -= 1;
        }else{
          shops[index].how = 0;
        }
      },
      allchecked:function(){
        let {allcheck,shops} = this.$data;
        this.allcheck = !allcheck
        for (let index = 0; index < shops.length; index++) {
         this.shops[index].checked = this.allcheck
        }
      },
      itemcheck:function(index){
        const {shops} = this.$data
        shops[index].checked = !shops[index].checked
        let judge = true
        for (let i = 0; i < shops.length; i++) {
          if(shops[i].checked == false){
            judge = false
          }
        }
        this.allcheck = judge
      },
      close:function(index){
        let {shops} = this.$data
        shops.splice(index,1); 
        // console.log(index)
      }
    },
    computed:{
      allmoney:function(){
        const {shops} = this.$data;
        let _count = 0;
        for (let index = 0; index < shops.length; index++) {
          _count += shops[index].how * shops[index].price;
        }
        return _count
      }
    }
  })
</script>

</html>